<template>
  <div class="flex">
    <div
      :class="['switch', stu==index && 'switch-action']"
      v-for="(item,index) in nameArr"
      :key="item"
      @click="$emit('seleClick',index)"
    >
    {{item}}
    </div>
  </div>
</template>

<script>
export default {
  name:"seleBtn",
  props:{
    nameArr:Array,
    stu:Number
  },
  methods:{
    seleAction(id){
      this.$emit('seleClick',id)
    }
  }
};
</script>

<style lang="scss" scoped>
.switch {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  min-width: 60px;
  height: 28px;
  border: 1px solid #00BFB1;
  cursor: pointer;
  color: #00BFB1;
}
.switch:first-child {
  border-radius: 2px 0 0 2px;
}
.switch:last-child {
  border-radius: 0 2px 2px 0;
}
.switch-action {
  color: #FFFFFF;
  background:#00BFB1 ;
}
</style>